/*
* @Author: suddev
* @Date:   2017-08-14 22:24:20
* @Last Modified by:   SUDDEV
* @Last Modified time: 2017-09-01 10:12:57
*/

'use strict';

//表单里的错误提示
var formError = {
    show    : function(errorMsg){
        $('.error-item').show().find('.error-message').text(errorMsg);
    },
    hide    : function(){
        $('.error-item').hide().find('.error-message').text('');
    }
};

//page逻辑部分
var page = {
    customerInfo : {

    },
    init : function () {
        this.bindEvent();
    },
    bindEvent : function () {
        var _this = this;
        //登陆按钮的点击
        $('#search').click(function(){
            $('.customer_info_form').hide();
            _this.submit();
        });
        $('#refresh').click(function(){
            window.location.reload();
        });
        $('#submit').click(function(){
            _this.update();
        });
        $('#reset').click(function(){
            _this.reset();
        });
        $('#submitDelete').click(function(){
            _this.submitDelete();
        });
        // // 如果按下回车，也执行提交
        // $('.form-inline').keyup(function(e){
        //     // keyCode13表示回车
        //     if (e.keyCode === 13) {
        //         _this.submit();
        //     }
        // });
    },
    // 提交表单
    submit : function () {
        var formData = {
            customerId	: $.trim($('#customerId').val()),
            name 		: $.trim($('#name').val()) || null
        },
        //表单验证结果
        validateResult = this.formValidate(formData);
        // 验证成功
        if (validateResult.status) {
        	formError.hide();
            //提交
            _info.input_search(formData,function(res){
                var text = "{{#list}}<tr id='num_{{customerId}}'><td class='list_id'>{{customerId}}</td><td class='list_realname'>{{realname}}</td><td class='list_sex'>{{sex}}</td><td class='list_birthday'>{{birthday}}</td><td class='list_phone'>{{phone}}</td><td class='list_cellphone'>{{cellphone}}</td><td class='list_address'>{{address}}</td><td class='list_startDate'>{{startDate}}</td><td class='list_memo'>{{memo}}</td><td><button class='btn btn-xs btn-primary' onclick='page.chlickUpdate(this)'>修改</button><button class='btn btn-xs btn-danger' data-toggle='modal' data-target='#myModal' onclick='page.chlickDelete(this)'>删除</button></td></tr>{{/list}}";
                var template = {
                    list : res
                }
                var result = _tools.renderHtml(text,template);
                $('#info_list').html(result);
                $('.customer_info_list').show();
            },function(errorMsg){
                $('.customer_info_list').hide();
                formError.show(errorMsg);
            });
        }
        //验证失败
        else{
            // 错误提示
            formError.show(validateResult.msg);
            $('.customer_info_list').hide();
        }
    },
    // 表单验证
    formValidate : function(formData){
        var result = {
            status  : false,
            msg     : ''
        };
        if (!_tools.validate(formData.customerId,'require') && !_tools.validate(formData.name,'require')) {
            result.msg = '请输入客户ID或客户姓名';
            return result;
        }
        //通过验证，返回正确提示
        result.status = true;
        result.msg    = '验证通过';
        return result;
    },
    // 点击修改按钮
    chlickUpdate  : function(e){
        var form = $(e).parent().parent();
        this.customerInfo = {
            customerId  : form.children('.list_id').text(),
            realname    : form.children('.list_realname').text(),
            sex         : form.children('.list_sex').text(),
            birthday    : form.children('.list_birthday').text(),
            phone       : form.children('.list_phone').text(),
            cellphone   : form.children('.list_cellphone').text(),
            address     : form.children('.list_address').text(),
            startDate   : form.children('.list_startDate').text(),
            memo        : form.children('.list_memo').text()
        }
        var customerInfo=this.customerInfo;
        $('#s_customerId').val(customerInfo.customerId);
        $('#realname').val(customerInfo.realname);
        customerInfo.sex==='男'?customerInfo.sex='m':customerInfo.sex='f';
        $('#sex[value='+customerInfo.sex+']').prop("checked", "checked");
        $('#birthday').val(customerInfo.birthday);
        $('#phone').val(customerInfo.phone);
        $('#cellphone').val(customerInfo.cellphone);
        $('#address').val(customerInfo.address);
        $('#startDate').val(customerInfo.startDate);
        $('#memo').val(customerInfo.memo);
        $('.customer_info_form').show();
        $('#realname').focus();
    },
    chlickDelete    : function(e){
        $('.customer_info_form').hide();
        var form = $(e).parent().parent();
        this.customerInfo = {
            customerId  : form.children('.list_id').text(),
            realname    : form.children('.list_realname').text()
        }
        var customerInfo = this.customerInfo;
        $('.modal-body').html("<h4>确认删除?</h4><br><table><tr><td><b>客户ID: </b></td><td>"+customerInfo.customerId+"</td></tr>"
                    +"<tr><td><b>客户姓名: </b></td><td>"+customerInfo.realname+"</td></table></tr>");
    },
    submitDelete    : function(){
        var customerInfo = this.customerInfo;
        _info.input_delete(customerInfo,function(res){
            $.gritter.add({
                // (string | mandatory) the heading of the notification
                title: '信息',
                // (string | mandatory) the text inside the notification
                text: '客户信息删除成功',
                // (string | optional) the image to display on the left
                image: 'assets/img/ui-sam.jpg',
                // (bool | optional) if you want it to fade out on its own or just sit there
                sticky: false,
                // (int | optional) the time you want it to be alive for before fading out
                time: '',
                // (string | optional) the class name you want to apply to that specific message
                class_name: 'my-sticky-class'
            });
            $('#myModal').modal("hide");
            $('#num_'+customerInfo.customerId).remove();
        },function(errorMsg){
            formError.show(errorMsg);
        });
    },
    // 提交修改
    update      : function(){
        var _this = this;
        var customerInfo = {
            customerId  : $.trim($('#s_customerId').val()),
            realname    : $.trim($('#realname').val()),
            sex         : $.trim($('#sex:checked').val()),
            birthday    : $.trim($('#birthday').val()),
            phone       : $.trim($('#phone').val()),
            cellphone   : $.trim($('#cellphone').val()),
            address     : $.trim($('#address').val()),
            startDate   : $.trim($('#startDate').val()),
            memo        : $.trim($('#memo').val())
        }
        _info.input_update(customerInfo,function(res){
                $.gritter.add({
                // (string | mandatory) the heading of the notification
                title: '信息',
                // (string | mandatory) the text inside the notification
                text: '客户信息修改成功',
                // (string | optional) the image to display on the left
                image: 'assets/img/ui-sam.jpg',
                // (bool | optional) if you want it to fade out on its own or just sit there
                sticky: false,
                // (int | optional) the time you want it to be alive for before fading out
                time: '',
                // (string | optional) the class name you want to apply to that specific message
                class_name: 'my-sticky-class'
            });
            $('.customer_info_form').hide();
            // 重新提交查询，更新列表
            _this.submit();
            },function(errorMsg){
               formError.show(errorMsg);
            });
    },
    // 重置
    reset       : function(){
        var customerInfo=this.customerInfo;
        $('#s_customerId').val(customerInfo.customerId);
        $('#realname').val(customerInfo.realname);
        $('#sex[value='+customerInfo.sex+']').prop("checked", "checked");
        $('#birthday').val(customerInfo.birthday);
        $('#phone').val(customerInfo.phone);
        $('#cellphone').val(customerInfo.cellphone);
        $('#address').val(customerInfo.address);
        $('#startDate').val(customerInfo.startDate);
        $('#memo').val(customerInfo.memo);
    }
}

$(function () {
   page.init(); 
});